<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>我的订单</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css"
    rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->
  <link rel="stylesheet" href="css/main.min.css">

  <!-- /style -->
</head>

<body>
  <div class="page page-user-center-order user-center-order">


    <section class="common_header_item">

      <!-- <header class="page__header">

          </header> -->

      <article class="section page__main_nav">
        <div class="section__wrapper" style="width: 1220px;">
          <div class="column-inner clearfix">
            <header class="page__header">

            </header>
            <!-- <nav class="page__nav bar__inner j_follow_bar_nav">
              <li class="nav__item" data-nav="index"><span class="nav__title"><a href="index.html">首页</a></span>
              </li>
              <li class="nav__item" data-nav="news"><span class="nav__title"><a href="news.html">新闻资讯</a></span>
              </li>
              <li class="nav__item" data-nav="live"><span class="nav__title"><a href="live.html">资源点播</a></span>
              </li>
              
              <li class="nav__item" data-nav="activity"><span class="nav__title"><a href="activity.html">文化活动</a></span>
              </li>
              <li class="nav__item" data-nav="venue"><span class="nav__title"><a href="venue.html">场馆导航</a></span>
              </li>
              <li class="nav__item" data-nav="network"><span class="nav__title"><a
                    href="network-train.html">网络培训</a></span>
              </li>
              
              <li class="nav__item" data-nav="exhibition"><span class="nav__title"><a
                    href="exhibition-list.html">网上展厅</a></span>
              </li>
              <span class="follow__bar"></span>
            </nav> -->
          </div>
        </div>
      </article>
    </section>
    <!-- /header -->
    <main class="page__container">
      <section class="section section__breadcrumb">
        <div class="section__wrapper">
          <div class="pure-u-1">
            <div class="column-inner">
              <div class="nav__breadcrumb">
                <a class="item" href="index.html">首页</a>
                <span class="separator">&gt;</span>
                <a class="item active" href="javascript:void(0)">我的订单</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- / breadcrumb -->
      <section class="section">
        <div class="section__wrapper">
          <div class="pure-u-1-6">
            <div class="column-inner">
              <div class="page-usercenter-left">
                <div class="usercenter-user">
                  <div class="usercenter-user_portrait">
                    <p>
                      <img src="http://via.placeholder.com/108x108" class="avatar" alt="" width="108" height="108" />
                      <a class="link"><i class="iconfont">&#xe67a;</i></a>
                    </p>
                    <span>用户昵称</span>
                  </div>
                </div>
                <div class="usercenter-user_type">
                  <ul>
                    <li class="active"><a href="user-center-order.html"><i class="iconfont">&#xe677;</i>我的订单</a>
                    </li>
                    <li><a href="user-center-favorite.html"><i class="iconfont">&#xe870;</i>我的收藏</a>
                    </li>
                    <li><a href="user-center-comment.html"><i class="iconfont">&#xe606;</i>我的评论</a>
                    </li>
                    <li><a href="user-volunteer-archive.html"><i class="iconfont">&#xe647;</i>我的志愿者</a>
                    </li>
                    <li><a href="user-center-team.html"><i class="iconfont">&#xe647;</i>我的社团</a>
                    </li>
                    <li><a href="user-center-profile.html"><i class="iconfont">&#xe67a;</i>个人设置</a>
                    </li>
                    <li><a href="general-certify.html"><i class="iconfont">&#xe6c3;</i>实名认证</a>
                    </li>
                    <li><a href="#"><i class="iconfont">&#xe6eb;</i>退出</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- /user-center-left -->
          <div class="pure-u-5-6">
            <div class="column-inner">
              <div class="module module__user_center">
                <div class="module module__user_title" id="statusType">
                  <a href="#" class="v-item active">全部订单 </a>
                  <a href="#" class="v-item ">待参加</a>
                </div>
                <div class="module module__user_container">
                  <div class="media-list" id="order">

                  </div>
                </div>
                <nav class="page-pagination" aria-label="page-pagination" id="pages">
                  <!-- <ul class="pagination">
                    <li class="item previous"><a href="#" aria-label="Previous" aria-hidden="true">首页</a>
                    </li>
                    <li class="item active"><a href="#">1</a>
                    </li>
                    <li class="item"><span>2</span>
                    </li>
                    <li class="item"><a href="#">3</a>
                    </li>
                    <li class="item"><a href="#">4</a>
                    </li>
                    <li class="item"><a href="#">5</a>
                    </li>
                    <li class="item"><a href="#">6</a>
                    </li>
                    <li class="item next"><a href="#" aria-label="Next" aria-hidden="true">下一页</a>
                    </li>
                    <li class="item">跳转到</li>
                    <li class="item">
                      <input type="text" />
                    </li>
                    <li class="item">页</li>
                    <li class="item active"><a href="#">&nbsp;&nbsp;GO&nbsp;&nbsp;</a>
                    </li>
                    <li class="item news-number">当前共有<i>1000</i>条</li>
                  </ul> -->
                </nav>
                <!-- / pagination -->
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="page__footer">
    </footer>
    <!-- / footer -->
  </div>
  <!-- /page -->

  <script
    src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css"
    rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>



  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/common/util.js"></script>

  <script src="js/app.js"></script>
  <script src="js/common.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/util/page-helper.js"></script>
  <script src="js/page-header.js"></script>
  <script src="js/page-footer.js"></script>
  <!-- /script -->
  <script type="text/html" id="tplTeml">
    <a href="#" target="_blank" class="media media__type_05 media-bg-white media-aside media-item-special-archive">
      <div class="pure-u-1-3">
        <div class="column-inner">
          <div class="object">
            <img class="img-responsive" src="http://via.placeholder.com/312x200" width="312" height="200" alt="">
          </div>
        </div>
      </div>
      <div class="pure-u-2-3">
        <div class="column-inner">
          <div class="caption">
            <div class="attach attach-inline">
              <div class="attach-main">
                <div class="attach-item attach-left">订单时间：2019-12-13 15：50</div>
                <div class="attach-item attach-right">订单编号：151518984984E</div>
              </div>
            </div>
            <div class="headline">
              <p>广西体育馆开幕式门票</p>
            </div>
           
            <div class="attach">
              <p>1（人）</p>
            </div>
            <div class="attach-extra">
              
              <div class="status status__attend"> 待参加 </div>
            </div>
          </div>
        </div>
      </div>
    </a>
   
  
  </script>
</body>
<script>
  $(document).ready(function () {
    var pageParms = getPageParms();
    var parms = {
      'status': null,
      'pageSize': 6,//每页条数
      'pageNumber': 1,//页码
    }
    //模拟ajax
    function ListDate(obj, sql, num) {
      var tpl = "";
      for (var i = 0; i < num; i++) {
        tpl += $('#' + sql).html();
      }
      $('.' + obj).append(tpl);
    }

    ListDate('media-list', 'tplTeml', 1);
    $('.v-item ').on('click', function () {
      $(this).addClass('active').siblings().removeClass('active');
    });
    $('.btm').on('click', function () {
      $(this).css('display', 'block').siblings().css('display', 'none');
    })
    //用来存储category状态
    var statusMap = new Map();
    //渲染category
    loadCategory(loadHtml)
    // loadHtml()
    function loadHtml() {
      commonAjax({
        type: "POST",
        url: "api/user/listOrder"
      }, parms, (req) => {
        req.setRequestHeader("userId", 1);
      }, (data) => {
        //渲染列表
        var list = data.data;
        page(pageParms, "pages", data)
        var html = '';
        $(list).each((index, item) => {
          html += '<a  target="_blank" class="media media__type_05 media-bg-white media-aside media-item-special-archive">' +
            '<div class="pure-u-1-3">' +
            '<div class="column-inner">' +
            '<div class="object">' +
            '<img class="img-responsive" src="' + item.poster + '" width="312" height="200" alt="">' +
            '</div></div></div>' +
            '<div class="pure-u-2-3">' +
            '<div class="column-inner">' +
            '<div class="caption">' +
            '<div class="attach attach-inline">' +
            '<div class="attach-main">' +
            '<div class="attach-item attach-left">订单时间：' + item.createTime + '</div>' +
            '<div class="attach-item attach-right">订单编号：' + item.orderId + '</div>' +
            '</div></div>' +
            '<div class="headline">' +
            '<p>' + item.resName + '</p>' +
            ' </div>' +
            '<div class="attach">' +
            '<p>' + item.reserveNum + '（人）</p>' +
            '</div>' +
            '<div class="attach-extra">' +
            '<div class="status status__attend"> ' + statusMap.get(item.status) + ' </div>' +
            '</div></div></div></div></a>';
        })
        $("#order").html(html)
      })
    }

    function loadCategory(endFunction) {
      commonAjax({
        type: "GET",
        url: "api/dict"
      }, {
          dictType: 'ticket_state'
        }, null, (data) => {
          var list = data.data;
          var html = '';
          html += '<a href="#" status="" class="v-item ' + (parms.status == null ? "active" : "") + '">全部订单 </a>';
          $(list).each((index, item) => {
            statusMap.set(item.value, item.label);
            html += '<a href="javascript:void(0);" class="v-item ' + (parms.status == item.value ? "active" : "") + '" status="' + item.value + '">' + item.label + '</a>';
          })
          if (typeof (endFunction) == 'function') {
            endFunction()
          }
          $("#statusType").html(html)
        })
    }

    $('#statusType').on('click', 'a', function (e) {
      var $this = $(this);
      status = $this.attr("status");
      parms.status = status;
      loadCategory(loadHtml)
      if ($this.attr('href') === "#") {
        e.preventDefault();
      }
    })
    onPage("pages", pageParms, parms, loadHtml)
  });
</script>

</html>